<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
 <h:head>
 </h:head>
 <h:body>
    <ui:composition template="/WEB-INF/templates/template-outsystem.xhtml">
       <ui:define name="content-title">
           <h1>#{msgs["register.page-title"]}</h1>
       </ui:define>
        
        <ui:define name="content">
            <script language="JavaScript" src="./resources/scripts/script.js"></script>
            <p>
              #{msgs["register.welcome-text"]}
            </p>

            <div>
                <h:form id="regForm" prependId="false">
                    <fieldset>
                        <legend>#{msgs["register.userValues"]}</legend>
                         <h:panelGrid columns="3">
                            <h:outputLabel for="name">#{msgs["register.name"]} *</h:outputLabel>
                            <h:inputText id="name" maxlength="32" required="true" value="#{registerBean.user.name}" requiredMessage="#{msgs['register.requiredName']}">
                                <f:validateLength minimum="3" maximum="32" />
                            </h:inputText>
                            <h:message for="name" />

                            <h:outputLabel for="login">#{msgs["register.login"]} *</h:outputLabel>
                            <h:inputText id="login" maxlength="32" required="true" validator="#{registerBean.validateLogin}" validatorMessage="#{msgs['register.loginIsExists']}" value="#{registerBean.user.login}" requiredMessage="#{msgs['register.requiredLogin']}">
                                <f:validateLength minimum="3" maximum="32" />
                            </h:inputText>
                            <h:message for="login" />

                            <h:outputLabel for="password1">#{msgs["register.password1"]} *</h:outputLabel>
                            <h:inputSecret id="password1" maxlength="32" required="true" value="#{registerBean.user.password}" requiredMessage="#{msgs['register.requiredPassword1']}">
                                <f:validateLength minimum="3" maximum="32" />
                            </h:inputSecret>
                            <h:message for="password1" />

                            <h:outputLabel for="password2">#{msgs["register.password2"]} *</h:outputLabel>
                            <h:inputSecret id="password2" maxlength="32" validatorMessage="#{msgs['register.passwordsAreNotEqual']}">
                                    <f:validator validatorId="PasswordsValidator" />
                                    <f:attribute name="passwordID" value="regForm:password1" />
                            </h:inputSecret>
                            <h:message for="password2" />
                        </h:panelGrid>
                    </fieldset>
                    <br/>
                    <fieldset>
                        <legend>#{msgs["register.companyValues"]}</legend>

                        <h:selectBooleanCheckbox id="isCompany" onclick = "displayPanel('isCompany', 'companyValues');">
                        </h:selectBooleanCheckbox>
                        <h:outputLabel for="isCompany">#{msgs["register.isCompany"]}</h:outputLabel>

                        <h:panelGrid columns="3" id="companyValues" style="display: none;">
                            <h:outputLabel for="company">#{msgs["register.company"]}</h:outputLabel>
                            <h:inputText id="company" required="false" maxlength="32" value="#{registerBean.user.company}">
                                <f:validateLength maximum="32" />
                            </h:inputText>
                            <h:message for="company" />

                            <h:outputLabel for="ic">#{msgs["register.ic"]}</h:outputLabel>
                            <h:inputText id="ic" required="false" maxlength="8" value="#{registerBean.user.ic}">
                                <f:validateLength maximum="8" />
                            </h:inputText>
                            <h:message for="ic" />

                            <h:outputLabel for="dic">#{msgs["register.dic"]}</h:outputLabel>
                            <h:inputText id="dic" required="false" maxlength="12" value="#{registerBean.user.dic}">
                                <f:validateLength maximum="12" />
                            </h:inputText>
                            <h:message for="dic" />
                        </h:panelGrid>
                    </fieldset>
                    <script language="JavaScript">
                      displayPanel('isCompany', 'companyValues');
                    </script>
                    <br/>
                    <fieldset>
                        <legend>#{msgs["register.contactValues"]}</legend>

                        <h:panelGrid columns="3">
                            <h:outputLabel for="address" >#{msgs["register.address"]}</h:outputLabel>
                            <h:inputText id="address" maxlength="32" required="false" value="#{registerBean.user.address}">
                                <f:validateLength maximum="32" />
                            </h:inputText>
                            <h:message for="address" />

                            <h:outputLabel for="city">#{msgs["register.city"]}</h:outputLabel>
                            <h:inputText id="city" maxlength="32" required="false" value="#{registerBean.user.city}">
                                <f:validateLength maximum="32" />
                            </h:inputText>
                            <h:message for="city" />

                            <h:outputLabel for="zipCode">#{msgs["register.zipCode"]}</h:outputLabel>
                            <h:inputText id="zipCode" maxlength="20" required="false" value="#{registerBean.user.zipCode}">
                                <f:validateLength maximum="20" />
                            </h:inputText>
                            <h:message for="zipCode" />

                            <h:outputLabel for="phone">#{msgs["register.phone"]}</h:outputLabel>
                            <h:inputText id="phone" maxlength="16" required="false" value="#{registerBean.user.phone}">
                                <f:validateLength maximum="16" />
                            </h:inputText>
                            <h:message for="phone" />

                            <h:outputLabel for="email">#{msgs["register.email"]} *</h:outputLabel>
                            <h:inputText id="email" maxlength="64" required="true" value="#{registerBean.user.email}" validatorMessage="#{msgs['register.badEmail']}"  requiredMessage="#{msgs['register.requiredEmail']}">
                                <f:validateLength maximum="64" />
                                <f:validator validatorId="EmailValidator" />

                            </h:inputText>
                            <h:message for="email" />

                            <h:outputLabel for="web">#{msgs["register.web"]}</h:outputLabel>
                            <h:inputText id="web" maxlength="64" required="false" value="#{registerBean.user.web}">
                                <f:validateLength maximum="64" />
                            </h:inputText>
                            <h:message for="web" />

                        </h:panelGrid>
                    </fieldset>
                    <br/>
                    <h:commandButton action="#{registerBean.create}" type="submit" value="#{msgs['register.submit']}"></h:commandButton>
                </h:form>
            </div>
       </ui:define>
    </ui:composition>

</h:body>
</html>
